<template>
	<view class="search">
		<view class="nav">
			<tui-icon name="arrowleft" size='32' class="back" @click="goBack"></tui-icon>
			<view class="input">
				<tui-icon name="search" size='24' class="icon"></tui-icon>
				<input confirm-type="search" v-model.trim="keyword" :auto-focus="searchStatus==1"
							placeholder="搜索商品" class="tui-input-class" @confirm="onKeywordConfirm"
							@tap="searchStatus=1">
				<tui-icon class="close" name="shut" size="24" color="#999" v-if="keyword" @click="refreshHistory"></tui-icon>
			</view>
		</view>
		<view v-if="searchStatus == 2">
			<view class="cont" v-if="productList.length > 0">
				<view class="ul">
					<view class="li" v-for="(item,index) in productList" :key="index" :data-id="item.id" @tap="navToGoodsDetail">
						<image :src="item.listPicUrl" alt="" class="img"></image>
						<view>
							<view class="title tui-ellipsis">{{item.name}}</view>
							<view class="num">{{ item.sales||0 }}人付款</view>
							<view class="val">￥{{item.marketPrice}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="not" v-else>
				<tui-no-data style="margin-top: 0rpx;" :imgUrl="imgConfig + 'images/mall/my_course_empty.png'">暂无数据
				</tui-no-data>
			</view>
		</view> 
		<view v-else-if="searchStatus == 1" style="padding: 20rpx">
			<view class="tui-search-history" v-if="history.length>0">
				<view class="tui-history-header">
					<view class="tui-search-title">搜索历史</view>
					<tui-icon name="delete" :size='14' color='#333' @click="openActionSheet" class="tui-icon-delete">
					</tui-icon>
				</view>
				<view class="tui-history-content">
					<view v-for="(item,index) in history" :key="index" @tap="onKeywordTap('', item)">
						<tui-tag margin="0 24rpx 24rpx 0" type="gray" shape="circle">{{item}}</tui-tag>
					</view>
				</view>
			</view>
			<view class="tui-search-hot">
				<view class="tui-hot-header">
					<view class="tui-search-title">大家正在搜</view>
				</view>
				<view class="searchHot">
					<view v-for="(item,index) in hot" :key="index" @tap="onKeywordTap(item.SCHEME_URL, item.KEYWORD)" class="list">
						<view class="label">{{index+1}}</view>
						<view class="val">{{item.KEYWORD}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 清空搜索历史 -->
		<tui-actionsheet :show="showActionSheet" :tips="tips" @click="cleanHistory" @cancel="closeActionSheet">
		</tui-actionsheet>
	</view>
</template>

<script>
	const app = getApp()
	const util = require("@/utils/util.js")
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				imgConfig: util.domainImg,
				searchStatus: 1,
				hot: [],
				history: [],
				showActionSheet: false,
				tips: "确认清空搜索历史吗？",
				
				keyword: '',
				categoryId: [],
				productList: [],
				current: 1,
				pages: '',
				loadding: false,
				pullUpOn: true,
			};
		},
		computed: {

		},
		watch: {

		},
		onLoad() {
			this.getHistory();
		},
		onShow() {

		},
		onPullDownRefresh: function() {
			this.current = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.searchStatus = 2;
			this.keyword = '';
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			this.loadding = true;
			if (this.current == this.pages) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getList(true);
				this.loadding = false;
			}
		},
		methods: {
			goBack() {
				util.goBack();
			},
			navToGoodsDetail: function(e) {
				uni.navigateTo({
					url: '/pages_shop/goods/goods?id=' + e.currentTarget.dataset.id
				});
			},
			getList(selet_type) {
				let that = this;
				let loadData;
				that.pullUpOn = true;
				if (selet_type) {
					loadData = JSON.parse(JSON.stringify(that.productList));
					that.current = that.current + 1;
				}
				util.request('search/searchList', {
					keyword: that.keyword,
					searchFrom: util.getFromType(),
					pointGoods: 'pointGoods',
					current: that.current,
					categoryIds: that.categoryId
				},'POST').then(res => {
					if (res.code == 0) {
						that.searchStatus = 2;
						that.productList = res.data.records;
						console.log(that.productList);
						that.pages = res.data.pages
						if (selet_type) {
							that.productList = loadData.concat(res.data.records);
						}
					}
				});
			},
			onKeywordConfirm() {
				let that = this;
				that.current = 1;
				that.productList = [];
				that.getList();
			},
			onKeywordTap: function(url, keyword) {
				if (url) {
					uni.navigateTo({
						url: url,
						fail: (res) => {
							util.toast('请配置正确的url地址~~~');
						}
					})
				} else {
					this.keyword = keyword
					this.onKeywordConfirm();
				}
			},
			refreshHistory() {
				this.keyword = '';
				this.searchStatus = 1;
				this.getHistory();
			},
			openActionSheet: function() {
				this.showActionSheet = true
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			cleanHistory: function() {
				let that = this;
				util.request('search/clearHistory', {}, 'POST').then(function(res) {
					that.showActionSheet = false;
					that.history = []
				});
			},
			getHistory() {
				let that = this;
				util.request('search/history').then(function(res) {
					// console.log(res);
					if (res.code === 0) {
						if (res.hotKeywordList) {
							that.hot = res.hotKeywordList
						}
						if (res.historyKeywordList) {
							that.history = res.historyKeywordList
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.search {
		padding-top: 140rpx;

		.nav {
			width: 100%;
			padding: 95rpx 210rpx 15rpx 90rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			background: #fff;
			.back {
				position: absolute;
				left: 30rpx;
				top: 90rpx;
			}

			.input {
				width: 100%;
				height: 60rpx;
				background: #F7F7F8;
				position: relative;
				padding: 0 70rpx;

				input {
					width: 100%;
					height: 100%;
					font-size: 26rpx;
					color: #111111;
				}

				.icon {
					position: absolute;
					left: 20rpx;
					top: 8rpx;
				}
				.close {
					position: absolute;
					right: 20rpx;
					top: 8rpx;
				}
			}
		}

		.cont {
			width: 100%;

			.ul {
				width: 100%;
				padding: 50rpx 30rpx 0;

				.li {
					width: 100%;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 30rpx;

					.img {
						width: 200rpx;
						height: 200rpx;
						flex-shrink: 0;
						margin-right: 30rpx;
					}

					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #111111;
						width: 460rpx;
					}

					.num {
						font-size: 26rpx;
						color: #AAAAAA;
						padding-top: 20rpx;
					}

					.val {
						font-size: 30rpx;
						color: #111111;
						padding-top: 24rpx;
					}
				}
			}
		}
		.tui-history-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
		}
		
		.tui-history-content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		
		.tui-icon-delete {
			padding: 10rpx;
		}
		
		.tui-search-title {
			font-size: 28rpx;
			font-weight: bold;
		}
		
		.tui-hot-header {
			padding: 30rpx 0;
		}
		.searchHot {
			.list {
				width: 100%;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 40rpx;
			}
			.label {
				width: 24rpx;
				line-height: 32rpx;
				background: linear-gradient(135deg, #EFDAB2, #EBAE64);;
				text-align: center;
				font-size: 20rpx;
				color: #111111;
				margin-right: 20rpx;
			}
			.val {
				font-size: 26rpx;
				color: #666666;
			}
		}
	}
</style>
